<template>
	<div class="admin-login">
		<div class="admin-login_box">
			<div class="m-login__logo">
				<img :src="logo" v-if="logo" />
			</div>
			<div class="m-login__signin">
				<h3>{{themeRoute.name}}</h3>
				<div class="form-control">
					<div class="m-input">
						<input v-model="user.username" placeholder="用户名" />
					</div>
					<div class="m-input">
						<input type="password" v-model="user.password" placeholder="密码" />
					</div>
					<div class="m-input" v-if="verificationMobile">
						<input v-model="user.verifyCode" placeholder="验证码" />
						<div class="m-codebut" @click="getCode">{{codeText}}</div>
					</div>
					<div class="m-login__form-sub" v-if="false">
						<div class="sub_text-color">
							<el-checkbox v-model="checked">记住密码</el-checkbox>
						</div>
						<div>
							<router-link to="" class="sub_text-color sub_forget" v-if="false">忘记密码?</router-link>
						</div>
					</div>
				</div>
				<div class="m-login__form-action">
					<el-button class="action_but" @click="subimt" :loading="loading">登录</el-button>
				</div>
				<div class="m-login__account" v-if="false">还没有账户？<router-link to="">注册</router-link>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				checked: false,
				loading: false,
				logo: null,
				user: {
					username: '',
					password: ''
				},
				verificationMobile: '',
				isCode: true,
				codeText: '获取验证码'
			}
		},
		props: {
			themeRoute: {}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.logo = await this.$api.configLogo()
			},
			async getCode() {
				if (this.isCode) {
					this.isCode = false
					var count = 60
					var timer = setInterval(() => {
						count--
						if (count > 0) {
							this.codeText = `${count}秒后重新获取`
						} else {
							clearInterval(timer)
							this.isCode = true
							this.codeText = '重新获取验证码'
						}
					}, 1000)
					await this.$ala.httpPost('api/Sms/SendVerifiyCode', {
						mobile: this.verificationMobile
					})
				}
			},
			async subimt() {
				this.loading = true
				await this.$ala.userLogin(this.user)
				var repones = await this.$ala.httpGet('api/UserDetail/Failure', {
					userName: this.user.username
				})
				if (repones >= 3) {
					this.verificationMobile = await this.$ala.httpGet('api/User/GetMobileByUserName', {
						userName: this.user.username
					})
				}
				this.loading = false
			}
		}
	}
</script>